<!--封装 ele-table-->
<template>
  <div class="table">
    <el-table
      v-loading.iTable="tableOptions.hasLoading?tableOptions.loading:false"
      id="iTable"
      ref="mutipleTable"
      :data="dataSource.list"
      :stripe="tableOptions.stripe"
      :border="tableOptions.border"
      :fit="tableOptions.fit"
      :height="height"
      element-loading-text="正在查询中。。。"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange">
      <!--是否需要选择框-->
      <el-table-column v-if="tableOptions.mutiSelect" type="selection" style="width: 55px;"/>
      <!--数据列-->
      <template v-for="(column, index) in dataSource.columns">
        <el-table-column
          :prop="column.prop"
          :key="index"
          :label="column.label"
          :align="column.align"
          :show-overflow-tooltip="true"
          :width="column.width">
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <span v-html="column.formatter(scope.row, column)"/>
              </template>
              <template v-else>
                <span>{{ scope.row[column.prop] }}</span>
              </template>
            </template>
            <template v-else>
              <Render-dom :column="column" :row="scope.row" :pvm="$parent"/>
            </template>
          </template>
        </el-table-column>
      </template>
      <!--按钮操作组 按钮超过2个显示更多-->
      <el-table-column
        v-if="dataSource.operates && dataSource.operates.list.length>0"
        ref="fixedColumn"
        :width="220"
        :fixed="dataSource.operates.fixed"
        label="操作"
        align="center">
        <template slot-scope="scope">
          <div class="operate-group">
            <template>
              <span v-for="(btn, key) in dataSource.operates.list.filter(x=>x.show(scope.row) == true).length>2?dataSource.operates.list.filter(x=>x.show(scope.row) == true).slice(0,2):dataSource.operates.list.filter(x=>x.show(scope.row) == true)" :key="key" class="btn">
                <M-Button
                  v-show="btn.show(scope.row)"
                  :type="btn.type"
                  :name="btn.label"
                  @click.native.prevent="btn.method(scope.$index,scope.row)"/>

              </span>
              <span v-if="dataSource.operates.list.filter(x=>x.show(scope.row) == true).length>2" class="btn">
                <el-dropdown>
                  <M-Button name="更多" type="info"/>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(btn,key) in dataSource.operates.list.filter(x=>x.show(scope.row) == true).slice(2,dataSource.operates.list.filter(x=>x.show(scope.row) == true).length)"
                      :key="key"
                      @click.native.prevent="btn.method(scope.$index,scope.row)"> {{ btn.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import MButton from './tagButton'
import RenderDom from './renderDom'
export default {
  components: {
    MButton, // 按钮组件
    RenderDom // 渲染组件
  },
  props: {
    dataSource: {
      type: Object,
      default() {
        return {
          list: [], // 数据列表
          columns: [], // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
          operates: {}, // 操作按钮组 === label: 文本，type :按钮类型（ success / warning / danger / info ），show：是否显示，icon：按钮图标，effect：按钮主题（light,plain），disabled：是否禁用，method：回调方法
          options: {} // table 表格配置项
        }
      }
    }
  },
  // 数据
  data() {
    return {
      headerLines: this.dataSource.headerLines || 2, // 页面中表格上边操作项的显示行数，（搜索，tab，功能按钮...）
      pageIndex: 1,
      multipleSelection: [], // 多行选中
      // 表格配置项
      tableOptions: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否要高亮当前行
        border: false, // 是否有纵向边框
        fit: true, // 列的宽度是否自撑开
        loading: true, // 是否显示加载动画
        hasLoading: true // 是否有加载动画
      }
    }
  },
  computed: {
    height() {
      return this.$baseTableHeight(this.headerLines)
    }
  },
  watch: {
    'dataSource': { // 监听表格列变化
      deep: true,
      handler() {
        // 解决表格列变动的抖动问题
        this.$nextTick(() => {
          this.$refs.mutipleTable.doLayout()
        })
      }
    },
    'dataSource.options': {
      deep: true,
      immediate: true,
      handler(n) {
        const options = Object.assign(this.tableOptions, n)
        this.$set(this, 'tableOptions', options)
      }
    }
  },
  methods: {
    // 多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', val)
    },
    // 单行选中
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    // 显示 表格操作弹窗
    showActionTableDialog() {
      this.$emit('handelAction')
    }
  }
}
</script>
<style lang="scss" >
  .btn{
    display: inline-block;
    margin-right: 6px;
  }
</style>
